<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08-生命周期函数</title>
    <style>
      * {
        cursor: pointer;
        user-select: none;
      }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>

    <script>

      // beforeMount ===> onBeforeMount
      // mounted ===> onMounted
      // beforeUpdate ===> onBeforeUpdate
      // updated ===> onUpdated
      // beforeUnmount ===> onBeforeUnmount
      // unmounted ==> onUnmounted

      const app = Vue.createApp({


        setup() {
          const { ref, onBeforeMount, onMounted,onBeforeUpdate,onUpdated, onRenderTracked, onRenderTriggered } = Vue;

          const name = ref("云牧");

          onBeforeMount(() => {
              console.log("onBeforeMount");
          })

          onMounted(() => {
              console.log("onMounted");
          })

          onBeforeUpdate(() => {
              console.log("onBeforeUpdate");
          })

          onUpdated(() => {
              console.log("onUpdated");
          })

        // 每次渲染后重新收集响应式依赖
          onRenderTracked(() => {
              console.log("onRenderTracked");
          })

        //  每次触发页面重新渲染的时候 自动执行
          onRenderTriggered(() => {
              console.log("onRenderTriggered");
          })



          const handleClcik = () => {
            name.value = "黛玉";
          };

          return { name, handleClcik };
        },

        template: `
                    <div @click="handleClcik">
                      {{name}}
                    </div>
                    
                `,
      });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
